<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>美女大战大胖橘 - 拳击对决</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            touch-action: none;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow: hidden;
        }

        .game-container {
            width: 100%;
            max-width: 800px;
            height: 100vh;
            max-height: 900px;
            position: relative;
            background: linear-gradient(to bottom, #87CEEB 0%, #98FB98 100%);
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            overflow: hidden;
        }

        canvas {
            width: 100%;
            height: 60%;
            display: block;
            background: linear-gradient(to bottom, #FFE4B5 0%, #FFDAB9 100%);
        }

        .ui-panel {
            position: absolute;
            top: 10px;
            left: 10px;
            right: 10px;
            height: 80px;
            background: rgba(255,255,255,0.9);
            border-radius: 15px;
            padding: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        .health-bar {
            width: 200px;
            height: 30px;
            background: #ddd;
            border-radius: 15px;
            overflow: hidden;
            position: relative;
        }

        .health-fill {
            height: 100%;
            background: linear-gradient(90deg, #ff6b6b, #ee5a24);
            transition: width 0.3s ease;
            border-radius: 15px;
        }

        .health-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-weight: bold;
            font-size: 14px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        }

        .player-info {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .player-name {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 5px;
            color: #333;
        }

        .controls {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 90%;
            max-width: 600px;
            height: 180px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, 1fr);
            gap: 10px;
        }

        .control-btn {
            background: linear-gradient(145deg, #6c5ce7, #a29bfe);
            border: none;
            border-radius: 15px;
            color: white;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .control-btn:active {
            transform: scale(0.95);
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }

        .control-btn.special {
            background: linear-gradient(145deg, #ff6b6b, #ff8787);
            grid-column: span 3;
            font-size: 18px;
        }

        .control-btn.special:active {
            animation: pulse 0.5s;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        .control-icon {
            font-size: 24px;
            margin-bottom: 5px;
        }

        .combo-display {
            position: absolute;
            top: 100px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 24px;
            font-weight: bold;
            color: #ff6b6b;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .combo-display.show {
            opacity: 1;
            animation: comboPopup 1s;
        }

        @keyframes comboPopup {
            0% { transform: translateX(-50%) scale(0.5); }
            50% { transform: translateX(-50%) scale(1.2); }
            100% { transform: translateX(-50%) scale(1); }
        }

        .game-over {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(255,255,255,0.95);
            padding: 30px;
            border-radius: 20px;
            text-align: center;
            display: none;
            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
        }

        .game-over.show {
            display: block;
            animation: slideIn 0.5s;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translate(-50%, -60%);
            }
            to {
                opacity: 1;
                transform: translate(-50%, -50%);
            }
        }

        .restart-btn {
            margin-top: 20px;
            padding: 12px 30px;
            background: linear-gradient(145deg, #6c5ce7, #a29bfe);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .restart-btn:hover {
            transform: scale(1.05);
        }

        @media (max-width: 600px) {
            .controls {
                height: 150px;
            }
            
            .control-btn {
                font-size: 12px;
            }
            
            .control-icon {
                font-size: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="game-container">
        <canvas id="gameCanvas"></canvas>
        
        <div class="ui-panel">
            <div class="player-info">
                <div class="player-name">美女</div>
                <div class="health-bar">
                    <div class="health-fill" id="playerHealth" style="width: 100%"></div>
                    <div class="health-text" id="playerHealthText">100/100</div>
                </div>
            </div>
            
            <div class="combo-display" id="comboDisplay"></div>
            
            <div class="player-info">
                <div class="player-name">大胖橘</div>
                <div class="health-bar">
                    <div class="health-fill" id="enemyHealth" style="width: 100%"></div>
                    <div class="health-text" id="enemyHealthText">100/100</div>
                </div>
            </div>
        </div>
        
        <div class="controls">
            <button class="control-btn" data-action="leftHand">
                <span class="control-icon">👊</span>
                <span>左拳</span>
            </button>
            <button class="control-btn" data-action="leftLeg">
                <span class="control-icon">🦵</span>
                <span>左腿</span>
            </button>
            <button class="control-btn" data-action="rightHand">
                <span class="control-icon">👊</span>
                <span>右拳</span>
            </button>
            <button class="control-btn" data-action="rightLeg">
                <span class="control-icon">🦵</span>
                <span>右腿</span>
            </button>
            <button class="control-btn" data-action="block">
                <span class="control-icon">🛡️</span>
                <span>防御</span>
            </button>
            <button class="control-btn special" data-action="special">
                <span class="control-icon">⚡</span>
                <span>必杀技 - 美女拳 (能量满时可用)</span>
            </button>
        </div>
        
        <div class="game-over" id="gameOver">
            <h2 id="gameOverTitle">游戏结束</h2>
            <p id="gameOverMessage"></p>
            <button class="restart-btn" onclick="restartGame()">重新开始</button>
        </div>
    </div>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        
        // 设置canvas尺寸
        function resizeCanvas() {
            const container = document.querySelector('.game-container');
            canvas.width = container.clientWidth;
            canvas.height = container.clientHeight * 0.6;
        }
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);
        
        // 游戏状态
        const game = {
            player: {
                x: 150,
                y: canvas.height / 2,
                health: 100,
                maxHealth: 100,
                energy: 0,
                maxEnergy: 100,
                isBlocking: false,
                isAttacking: false,
                attackType: null,
                combo: 0
            },
            enemy: {
                x: canvas.width - 150,
                y: canvas.height / 2,
                health: 100,
                maxHealth: 100,
                isAttacking: false,
                attackCooldown: 0
            },
            particles: [],
            gameOver: false,
            winner: null
        };
        
        // 粒子效果类
        class Particle {
            constructor(x, y, type = 'hit') {
                this.x = x;
                this.y = y;
                this.type = type;
                this.vx = (Math.random() - 0.5) * 8;
                this.vy = (Math.random() - 0.5) * 8;
                this.life = 1;
                this.decay = 0.02;
                this.size = Math.random() * 5 + 3;
            }
            
            update() {
                this.x += this.vx;
                this.y += this.vy;
                this.vy += 0.2;
                this.life -= this.decay;
                this.size *= 0.98;
            }
            
            draw() {
                ctx.save();
                ctx.globalAlpha = this.life;
                
                if (this.type === 'hit') {
                    ctx.fillStyle = '#ff6b6b';
                } else if (this.type === 'special') {
                    ctx.fillStyle = '#ffd700';
                } else {
                    ctx.fillStyle = '#6c5ce7';
                }
                
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fill();
                ctx.restore();
            }
        }
        
        // 绘制角色
        function drawCharacter(x, y, isPlayer, isAttacking, attackType, isBlocking) {
            ctx.save();
            
            if (isPlayer) {
                // 绘制美女
                // 身体
                ctx.fillStyle = '#FFB6C1';
                ctx.fillRect(x - 30, y - 40, 60, 80);
                
                // 头
                ctx.beginPath();
                ctx.arc(x, y - 60, 25, 0, Math.PI * 2);
                ctx.fillStyle = '#FDBCB4';
                ctx.fill();
                
                // 头发
                ctx.beginPath();
                ctx.arc(x, y - 65, 28, Math.PI, 0);
                ctx.fillStyle = '#8B4513';
                ctx.fill();
                
                // 眼睛
                ctx.fillStyle = '#000';
                ctx.beginPath();
                ctx.arc(x - 8, y - 60, 3, 0, Math.PI * 2);
                ctx.arc(x + 8, y - 60, 3, 0, Math.PI * 2);
                ctx.fill();
                
                // 手臂
                if (isAttacking && attackType) {
                    if (attackType.includes('Hand')) {
                        // 攻击动画
                        const armX = attackType === 'leftHand' ? x - 40 : x + 40;
                        ctx.strokeStyle = '#FDBCB4';
                        ctx.lineWidth = 8;
                        ctx.beginPath();
                        ctx.moveTo(x, y - 20);
                        ctx.lineTo(armX, y - 40);
                        ctx.stroke();
                        
                        // 拳头
                        ctx.fillStyle = '#FDBCB4';
                        ctx.beginPath();
                        ctx.arc(armX, y - 40, 10, 0, Math.PI * 2);
                        ctx.fill();
                    }
                } else {
                    // 正常手臂
                    ctx.strokeStyle = '#FDBCB4';
                    ctx.lineWidth = 8;
                    ctx.beginPath();
                    ctx.moveTo(x, y - 20);
                    ctx.lineTo(x - 35, y);
                    ctx.moveTo(x, y - 20);
                    ctx.lineTo(x + 35, y);
                    ctx.stroke();
                }
                
                // 腿
                if (isAttacking && attackType && attackType.includes('Leg')) {
                    const legX = attackType === 'leftLeg' ? x - 20 : x + 20;
                    ctx.strokeStyle = '#FFB6C1';
                    ctx.lineWidth = 10;
                    ctx.beginPath();
                    ctx.moveTo(x, y + 40);
                    ctx.lineTo(legX, y + 20);
                    ctx.lineTo(legX, y - 10);
                    ctx.stroke();
                } else {
                    ctx.strokeStyle = '#FFB6C1';
                    ctx.lineWidth = 10;
                    ctx.beginPath();
                    ctx.moveTo(x, y + 40);
                    ctx.lineTo(x - 20, y + 80);
                    ctx.moveTo(x, y + 40);
                    ctx.lineTo(x + 20, y + 80);
                    ctx.stroke();
                }
                
                // 防御盾牌
                if (isBlocking) {
                    ctx.strokeStyle = 'rgba(100, 149, 237, 0.6)';
                    ctx.lineWidth = 3;
                    ctx.beginPath();
                    ctx.arc(x, y, 50, 0, Math.PI * 2);
                    ctx.stroke();
                }
            } else {
                // 绘制大胖橘
                // 身体（胖胖的）
                ctx.fillStyle = '#FF8C00';
                ctx.beginPath();
                ctx.ellipse(x, y, 45, 35, 0, 0, Math.PI * 2);
                ctx.fill();
                
                // 头
                ctx.beginPath();
                ctx.arc(x, y - 35, 30, 0, Math.PI * 2);
                ctx.fillStyle = '#FFA500';
                ctx.fill();
                
                // 耳朵
                ctx.beginPath();
                ctx.moveTo(x - 25, y - 50);
                ctx.lineTo(x - 20, y - 65);
                ctx.lineTo(x - 10, y - 55);
                ctx.moveTo(x + 25, y - 50);
                ctx.lineTo(x + 20, y - 65);
                ctx.lineTo(x + 10, y - 55);
                ctx.fillStyle = '#FF8C00';
                ctx.fill();
                
                // 眼睛
                ctx.fillStyle = '#000';
                ctx.beginPath();
                ctx.arc(x - 10, y - 35, 4, 0, Math.PI * 2);
                ctx.arc(x + 10, y - 35, 4, 0, Math.PI * 2);
                ctx.fill();
                
                // 鼻子
                ctx.fillStyle = '#FF69B4';
                ctx.beginPath();
                ctx.arc(x, y - 25, 5, 0, Math.PI * 2);
                ctx.fill();
                
                // 胡须
                ctx.strokeStyle = '#000';
                ctx.lineWidth = 1;
                ctx.beginPath();
                ctx.moveTo(x - 30, y - 30);
                ctx.lineTo(x - 15, y - 28);
                ctx.moveTo(x + 30, y - 30);
                ctx.lineTo(x + 15, y - 28);
                ctx.stroke();
                
                // 爪子
                ctx.fillStyle = '#FF8C00';
                ctx.beginPath();
                ctx.arc(x - 25, y + 25, 8, 0, Math.PI * 2);
                ctx.arc(x + 25, y + 25, 8, 0, Math.PI * 2);
                ctx.fill();
                
                // 尾巴
                ctx.strokeStyle = '#FF8C00';
                ctx.lineWidth = 8;
                ctx.beginPath();
                ctx.moveTo(x + 40, y);
                ctx.quadraticCurveTo(x + 60, y - 20, x + 50, y - 40);
                ctx.stroke();
            }
            
            ctx.restore();
        }
        
        // 攻击判定
        function performAttack(attackType) {
            if (game.gameOver || game.player.isAttacking) return;
            
            game.player.isAttacking = true;
            game.player.attackType = attackType;
            
            let damage = 0;
            let hitChance = 0.7;
            
            switch(attackType) {
                case 'leftHand':
                case 'rightHand':
                    damage = 15;
                    hitChance = 0.8;
                    break;
                case 'leftLeg':
                case 'rightLeg':
                    damage = 20;
                    hitChance = 0.6;
                    break;
                case 'special':
                    if (game.player.energy >= game.player.maxEnergy) {
                        damage = 50;
                        hitChance = 1;
                        game.player.energy = 0;
                        createSpecialEffect();
                    } else {
                        game.player.isAttacking = false;
                        return;
                    }
                    break;
            }
            
            if (Math.random() < hitChance) {
                game.enemy.health = Math.max(0, game.enemy.health - damage);
                game.player.combo++;
                game.player.energy = Math.min(game.player.maxEnergy, game.player.energy + 10);
                
                // 创建击中粒子
                for (let i = 0; i < 10; i++) {
                    game.particles.push(new Particle(game.enemy.x, game.enemy.y, attackType === 'special' ? 'special' : 'hit'));
                }
                
                // 显示连击
                if (game.player.combo > 1) {
                    showCombo(game.player.combo);
                }
                
                updateHealthBars();
                
                if (game.enemy.health <= 0) {
                    endGame('player');
                }
            } else {
                game.player.combo = 0;
            }
            
            setTimeout(() => {
                game.player.isAttacking = false;
                game.player.attackType = null;
            }, 300);
        }
        
        // 防御
        function block() {
            game.player.isBlocking = true;
            setTimeout(() => {
                game.player.isBlocking = false;
            }, 500);
        }
        
        // 特效
        function createSpecialEffect() {
            for (let i = 0; i < 30; i++) {
                game.particles.push(new Particle(game.player.x, game.player.y, 'special'));
            }
        }
        
        // 显示连击
        function showCombo(combo) {
            const comboDisplay = document.getElementById('comboDisplay');
            comboDisplay.textContent = `${combo} 连击！`;
            comboDisplay.classList.add('show');
            setTimeout(() => {
                comboDisplay.classList.remove('show');
            }, 1000);
        }
        
        // 更新血条
        function updateHealthBars() {
            const playerHealthBar = document.getElementById('playerHealth');
            const playerHealthText = document.getElementById('playerHealthText');
            const enemyHealthBar = document.getElementById('enemyHealth');
            const enemyHealthText = document.getElementById('enemyHealthText');
            
            playerHealthBar.style.width = `${(game.player.health / game.player.maxHealth) * 100}%`;
            playerHealthText.textContent = `${Math.ceil(game.player.health)}/${game.player.maxHealth}`;
            
            enemyHealthBar.style.width = `${(game.enemy.health / game.enemy.maxHealth) * 100}%`;
            enemyHealthText.textContent = `${Math.ceil(game.enemy.health)}/${game.enemy.maxHealth}`;
        }
        
        // 敌人AI
        function updateEnemy() {
            if (game.gameOver) return;
            
            game.enemy.attackCooldown--;
            
            if (game.enemy.attackCooldown <= 0 && !game.player.isBlocking) {
                if (Math.random() < 0.02) {
                    game.enemy.isAttacking = true;
                    const damage = Math.random() * 15 + 5;
                    game.player.health = Math.max(0, game.player.health - damage);
                    
                    // 创建击中粒子
                    for (let i = 0; i < 8; i++) {
                        game.particles.push(new Particle(game.player.x, game.player.y, 'enemy'));
                    }
                    
                    updateHealthBars();
                    
                    if (game.player.health <= 0) {
                        endGame('enemy');
                    }
                    
                    game.enemy.attackCooldown = 60;
                    
                    setTimeout(() => {
                        game.enemy.isAttacking = false;
                    }, 300);
                }
            }
        }
        
        // 游戏结束
        function endGame(winner) {
            game.gameOver = true;
            game.winner = winner;
            
            const gameOverDiv = document.getElementById('gameOver');
            const title = document.getElementById('gameOverTitle');
            const message = document.getElementById('gameOverMessage');
            
            if (winner === 'player') {
                title.textContent = '🎉 胜利！';
                message.textContent = '恭喜你击败了大胖橘！';
            } else {
                title.textContent = '😢 失败';
                message.textContent = '大胖橘获胜了，再接再厉！';
            }
            
            gameOverDiv.classList.add('show');
        }
        
        // 重新开始
        function restartGame() {
            game.player.health = game.player.maxHealth;
            game.player.energy = 0;
            game.player.combo = 0;
            game.player.isBlocking = false;
            game.player.isAttacking = false;
            
            game.enemy.health = game.enemy.maxHealth;
            game.enemy.attackCooldown = 0;
            
            game.particles = [];
            game.gameOver = false;
            game.winner = null;
            
            document.getElementById('gameOver').classList.remove('show');
            updateHealthBars();
        }
        
        // 游戏循环
        function gameLoop() {
            // 清空画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 绘制背景
            const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
            gradient.addColorStop(0, '#FFE4B5');
            gradient.addColorStop(1, '#FFDAB9');
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // 绘制地面
            ctx.fillStyle = '#8B7355';
            ctx.fillRect(0, canvas.height - 50, canvas.width, 50);
            
            // 更新和绘制粒子
            game.particles = game.particles.filter(particle => {
                particle.update();
                if (particle.life > 0) {
                    particle.draw();
                    return true;
                }
                return false;
            });
            
            // 绘制角色
            drawCharacter(
                game.player.x, 
                game.player.y, 
                true, 
                game.player.isAttacking, 
                game.player.attackType,
                game.player.isBlocking
            );
            
            drawCharacter(
                game.enemy.x, 
                game.enemy.y, 
                false, 
                game.enemy.isAttacking, 
                null,
                false
            );
            
            // 更新敌人
            updateEnemy();
            
            // 能量恢复
            if (!game.gameOver) {
                game.player.energy = Math.min(game.player.maxEnergy, game.player.energy + 0.1);
            }
            
            requestAnimationFrame(gameLoop);
        }
        
        // 控制事件
        document.querySelectorAll('.control-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const action = this.dataset.action;
                
                switch(action) {
                    case 'leftHand':
                    case 'rightHand':
                    case 'leftLeg':
                    case 'rightLeg':
                        performAttack(action);
                        break;
                    case 'block':
                        block();
                        break;
                    case 'special':
                        performAttack('special');
                        break;
                }
            });
            
            // 触摸事件优化
            btn.addEventListener('touchstart', function(e) {
                e.preventDefault();
                this.click();
            });
        });
        
        // 键盘控制
        document.addEventListener('keydown', function(e) {
            if (game.gameOver) return;
            
            switch(e.key) {
                case 'a':
                case 'A':
                    performAttack('leftHand');
                    break;
                case 'd':
                case 'D':
                    performAttack('rightHand');
                    break;
                case 's':
                case 'S':
                    performAttack('leftLeg');
                    break;
                case 'w':
                case 'W':
                    performAttack('rightLeg');
                    break;
                case ' ':
                    block();
                    break;
                case 'q':
                case 'Q':
                    performAttack('special');
                    break;
            }
        });
        
        // 启动游戏
        updateHealthBars();
        gameLoop();
    </script>
</body>
</html>
